<template>
    <view>
        <!-- 导航栏 -->
        <u-navbar :autoBack="true">
            <view slot="center">
                <u--text suffixIcon="arrow-down" iconStyle="top:4rpx;" :text="weekText" @click="showPopup = !showPopup" />
            </view>
        </u-navbar>
        <!-- 返回顶部 -->
        <u-back-top :scroll-top="scrollTop" :top="200" :right="10" />
        <!-- 周次选择 -->
        <u-popup :show="showPopup" :closeOnClickOverlay="true" :round="10" mode="bottom" @close="showPopup = false">
            <u-grid :col="4" :border="false" :align="center">
                <u-grid-item v-for="(item, index) in 20" :key="index" @click="click">
                    <view class="grid" :class="wIndex == index + 1? 'selected':''" :style="currentWeek == index + 1? 'background-color: #24BA97; color: #fff;': ''">
                        <text class="grid-text">{{ currentWeek == index + 1? '本周':'第' + (index + 1) + '周'}}</text>
                    </view>
                </u-grid-item>
            </u-grid>
        </u-popup>
        <!-- 课程详情 -->
        <u-popup :show="showDetail" :closeOnClickOverlay="true" :round="10" mode="bottom" @close="showDetail = false">
            <view style="padding: 10rpx;">
                <u-cell-group :border="false">
		            <u-cell icon="calendar" title="课程名称" :border="false" :value="detail.name"></u-cell>
		            <u-cell icon="map" title="上课地点" :border="false" :value="detail.address"></u-cell>
                    <u-cell icon="clock" title="课程节次" :border="false" :value="detail.section"></u-cell>
		            <u-cell icon="bell" title="课程周次" :border="false" :value="detail.weekText"></u-cell>
                    <u-cell icon="account" title="授课教师" :border="false" :value="detail.teacher"></u-cell>
                    <u-cell icon="edit-pen" title="考核方式" :border="false" :value="detail.assessment"></u-cell>
		            <u-cell icon="star" title="课程学分" :border="false" :value="`${detail.credit} 分`"></u-cell>
                    <u-cell icon="hourglass" title="课程学时" :border="false" :value="detail.hours"></u-cell>
	            </u-cell-group>
            </view>
        </u-popup>
        <!-- 课表 -->
        <view class="container">
            <view class="week-list">
                <view class="now-month"></view>
                <view class="week-item" v-for="(item, index) in weekDate.length" :key="index">
                    <text class="week-name" :class="index + 1 == weekIndex && wIndex == currentWeek ? 'text-blue' : ''">{{ weekday[item] }}</text>
                    <text class="week-date" :class="index + 1 == weekIndex && wIndex == currentWeek ? 'text-blue' : ''">{{ weekDate[item] }}</text>
                </view>
            </view>
            <view class="course">
                <view class="course-nums">
                    <view class="course-num" v-for="(item, index) in sectionIndex[0] + 1" :key="index">{{ index + 1 }}</view>
                    <view class="course-rest"></view>
                    <view class="course-num" v-for="(item, index) in sectionIndex[1] + 1" :key="index">{{ sectionIndex[0] + 1 + index + 1 }}</view>
                    <view class="course-rest"></view>
                    <view class="course-num" v-for="(item, index) in sectionIndex[2] + 1" :key="index">{{ sectionIndex[0] + 1 + sectionIndex[1] + 1 + index + 1 }}</view>
                </view>
                <view class="course-box">
                    <swiper class="swiper" circular easing-function="linear" :duration="300" @animationfinish="onSwiperChange">
                        <swiper-item v-for="(item, index) in displayList" :key="index">
                            <view class="content">
                                <view class="cell" v-for="(item, i) in length" :key="i"></view>
                                <!-- 上午 -->
                                <block v-for="(item, i) in morning" :key="i">
                                    <view class="p-2 border" @click="clickCourse(item)" :style="'grid-area:'+item.sections[0]+'/'+item.day+'/'+(item.sections[1]+1)+'/'+(item.day+1)+';background-color:'+item.color+';height:'+'calc(200rpx * '+item.mubber+');'">
                                        <view class="pt-1" style="word-break: break-all">{{ item.name }}</view>
                                        <view class="pt-1">{{ item.address }}</view>
                                        <view class="pt-1">{{ item.teacher }}</view>
                                    </view>
                                </block>
                                <view class="restLine" :style="'grid-area:'+(grid[0]+1)+'/1/'+(grid[0]+2)+'/8;'">中午</view>
                                <!-- 下午 -->
                                <block v-for="(item, i) in afternoon" :key="i">
                                    <view class="p-2 border" @click="clickCourse(item)" :style="'grid-area:'+(item.sections[0]+1)+'/'+item.day+'/'+(item.sections[1]+2)+'/'+(item.day+1)+';background-color:'+item.color+';height:'+'calc(200rpx * '+item.mubber+');'">
                                        <view class="pt-1" style="word-break: break-all">{{ item.name }}</view>
                                        <view class="pt-1">{{ item.address }}</view>
                                        <view class="pt-1">{{ item.teacher }}</view>
                                    </view>
                                </block>
                                <view class="restLine" :style="'grid-area:'+(grid[0]+grid[1]+2)+'/1/'+(grid[0]+grid[1]+3)+'/8;'">晚上
                                </view>
                                <!-- 晚上 -->
                                <block v-for="(item, i) in evening" :key="i">
                                    <view class="p-2 border" @click="clickCourse(item)" :style="'grid-area:'+(item.sections[0]+2)+'/'+item.day+'/'+(item.sections[1]+3)+'/'+(item.day+1)+';background-color:'+item.color+';height:'+'calc(200rpx * '+item.mubber+');'">
                                        <view class="pt-1" style="word-break: break-all">{{ item.name }}</view>
                                        <view class="pt-1">{{ item.address }}</view>
                                        <view class="pt-1">{{ item.teacher }}</view>
                                    </view>
                                </block>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
let list = [1, 2, 3];
let index = null;
let currentIndex = 0;
export default {
    // 属性
    props: {
        course: {
            type: Array,
            default() {
                return [];
            }
        },
        currentWeek: {
            type: Number,
            default: 1
        },
        startDate: {
            type: String,
            default: ''
        },
        sectionIndex: {
            type: Array,
            default() {
                return [4, 3, 1];
            }
        },
        scrollTop: {
            type: Number,
            default: 0
        }
    },
    // 数据
    data() {
        return {
            wIndex: null,       // 当前周
            displayList: [],    // 显示列表
            weekDate: [],       // 本周日期
            weekText: null,     // 周文标题
            weekday: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],  // 星期
            weekIndex: new Date().getDay() === 0 ? 7 : new Date().getDay(),  // 星期索引
            showPopup: false,   // 显示弹窗
            showDetail: false,  // 显示详情
            sectionNum: null,   // 节数
            morning: [],        // 上午课程
            afternoon: [],      // 下午课程
            evening: [],        // 晚上课程
            grid: [],           // 格子
            length: null,       // 课程长度
            current: 0,         // 当前索引
            detail: null,       // 课程详情
        }
    },
    // 监听
    watch: {
        wIndex(newVal, oldVal) {
            this.getWeekDate();
            this.getWeekCourse();
            this.weekText = `第${newVal}周`;
        },
        course(newVal, oldVal) {
            this.getWeekCourse();
        },
    },
    // 计算
    computed: {},
    // 方法
    methods: {
        // 获取本周日期
        getWeekDate() {
            const date = new Date(Date.parse(this.startDate) + ((1000 * 60 * 60 * 24 * 7) * (this.wIndex - 1)));
            const day = date.getDay();
            const firstDay = date.getDate() - day + 1;
            const lastDay = date.getDate() + (7 - day);
            let weekDate = [];
            for (let i = firstDay; i <= lastDay; i++) {
                const d = new Date(date.getFullYear(), date.getMonth(), i);
                weekDate.push(uni.$u.timeFormat(d, 'mm/dd'));
            }
            this.weekDate = weekDate;
        },
        // 点击周
        click(i) {
            this.wIndex = i + 1;
            this.showPopup = false;
        },
        // 点击课程
        clickCourse(e) {
            this.detail = e;
            this.showDetail = true;
        },
        // 获取本周课程
        getWeekCourse() {
            let morning = [];
            let afternoon = [];
            let evening = [];
            let clen = 0;
            let list = this.course;
            let grid = JSON.parse(JSON.stringify(this.sectionIndex));
            grid[0] = grid[0] + 1;
            grid[1] = grid[1] + 1;
            grid[2] = grid[2] + 1;
            for (let i = 0; i < list.length; i++) {
                for (let j = 0; j < list[i].weeks.length; j++) {
                    if (list[i].weeks[j] == this.wIndex) {
                        clen += list[i].sections[1] - list[i].sections[0] + 1;
                        let am = null;
                        let pm = null;
                        let em = null;
                        for (let s = list[i].sections[0]; s <= list[i].sections[1]; s++) {
                            let data = JSON.parse(JSON.stringify(list[i]));
                            if (s <= grid[0] && s < grid[0] + 1) {
                                data.sections[1] = list[i].sections[1] > grid[0] ? grid[0] : list[i].sections[1];
                                data.mubber = data.sections[1] - data.sections[0] + 1;
                                am = data;
                            }
                            if (s >= grid[0] + 1 && s < grid[0] + grid[1] + 1) {
                                data.sections[0] = list[i].sections[0] < grid[0] + 1 ? grid[0] + 1 : list[i].sections[0];
                                data.sections[1] = list[i].sections[1] > grid[0] + grid[1] ? grid[0] + grid[1] : list[i].sections[1];
                                data.mubber = data.sections[1] - data.sections[0] + 1;
                                pm = data;
                            }
                            if (s > grid[0] + grid[1]) {
                                data.sections[0] = list[i].sections[0] < grid[0] + grid[1] + 1 ? grid[0] + grid[1] + 1 : list[i].sections[0];
                                data.mubber = data.sections[1] - data.sections[0] + 1;
                                em = data;
                            }
                        }
                        if (am != null) {
                            morning.push(am);
                        }
                        if (pm != null) {
                            afternoon.push(pm);
                        }
                        if (em != null) {
                            evening.push(em);
                        }
                    }
                }
            }
            const sectionNum = grid.reduce((x, y) => x + y);
            this.grid = grid;
            this.length = (sectionNum * 7) - clen;
            this.sectionNum = sectionNum;
            this.morning = morning;
            this.afternoon = afternoon;
            this.evening = evening;
        },
        // 监听滑动
        onSwiperChange(e) {
            const current = e.detail.current;
            if (currentIndex - current == 2 || currentIndex - current == -1) {
                index = index + 1 == list.length ? 0 : index + 1;
                currentIndex = currentIndex + 1 == 3 ? 0 : currentIndex + 1;
                this.upDateDisplayList();
                if (this.wIndex === 20) return;
                this.wIndex = this.wIndex + 1;
            } else if (currentIndex - current == -2 || currentIndex - current == 1) {
                index = index - 1 == -1 ? list.length - 1 : index - 1;
                currentIndex = currentIndex - 1 == -1 ? 2 : currentIndex - 1;
                this.upDateDisplayList();
                if (this.wIndex === 1) return;
                this.wIndex = this.wIndex - 1;
            }
        },
        // 更新显示列表
        upDateDisplayList() {
            let displayList = [];
            displayList[currentIndex] = list[index];
            displayList[currentIndex - 1 == -1 ? 2 : currentIndex - 1] = list[index - 1 == -1 ? list.length - 1 : index - 1];
            displayList[currentIndex + 1 == 3 ? 0 : currentIndex + 1] = list[index + 1 == list.length ? 0 : index + 1];
            this.displayList = displayList;
        },
    },
    // 生命周期
    beforeCreate() {

    },
    // 创建
    created() {
        this.wIndex = this.currentWeek;
        this.current = this.currentWeek - 1;
        this.upDateDisplayList();
        this.getWeekDate();
    },
    // 挂载
    mounted() {
        
    },
    // 更新
    updated() {

    },
    // 销毁
    destroyed() {

    },
    onReady() {

    },
}
</script>
<style lang="scss">
.grid {
    width: 165rpx;
    text-align: center;
    margin-top: 15rpx;  
    padding: 30rpx 10rpx;
    border: 1rpx solid #9e9e9e;
    border-radius: 8rpx;
    color: #9e9e9e;
    
    &-text {
        font-size: 14px;
    }

    &.selected {
        background-color: #1989fa;
        color: #fff !important;
    }
}

.container {
    .week-list {
        position: fixed;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        height: 92rpx;
        background-color: #F5F7F8;
        z-index: 2;

        .now-month {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50rpx;
            height: 100%;
            font-size: 24rpx;
            color: #666666;
        }

        .week-item {
            width: calc((100% - 50rpx) / 7);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 5rpx;

            .week-name {
                font-size: 24rpx;
                color: #444444;
            }

            .week-date {
                font-size: 20rpx;
                color: #a1a1a1;
            }
        }
    }
    
    .course {
        display: flex;
        flex-direction: row;
        padding-top: 92rpx;
        width: 100%;

        &-nums {
            width: 50rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #F5F6F7;
        }

        &-num {
            width: 100%;
            height: 200rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            color: #999999;
            border-top: 1rpx solid #e0e0e0;
            border-right: 1rpx solid #e0e0e0;
        }

        &-rest {
            height: 40rpx;
            line-height: 40rpx;
            width: 100%;
            border-top: 1rpx solid #e0e0e0;
            background-color: #f7f7f7;
        }

        &-box {
            width: calc(100% - 50rpx);

            .swiper {
                height: 100%;

                .content {
                    display: grid;
                    grid-auto-flow: dense;
                    grid-gap: 0rpx;
                    transition: all 0.5s;
                    grid-template-columns: repeat(7, 1fr);
                
                    .cell {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 200rpx;
                        border: 1rpx solid #f4f4f4;
                        border-radius: 6rpx;
                    }
                
                    .restLine {
                        height: 40rpx;
                        line-height: 40rpx;
                        text-align: center;
                        color: #00000033;
                        font-size: 2.592593vw;
                        background-color: #f7f7f7;
                        z-index: 1;
                    }
                
                    .border {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        font-size: 3vw;
                        border: 1rpx solid #f4f4f4;
                        border-radius: 6rpx;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>